<template>
    <view class="page">
        <view style="margin-top: 10rpx;"></view>
        <view style="width: 80%; margin: 10rpx auto;border: 1px solid #eeeeee;border-radius: 50px;">
            <uni-segmented-control :current="current" :values="isgroup ==1 ?tab1:tab2" @clickItem="onClickItem"
                styleType="button" activeColor="#ff7057"></uni-segmented-control>
        </view>
        <view class="line">
            <view class="left">
                <view class="pin" v-if="isgroup==1 && type==1 && current == 0">拼</view> {{money_title}}
            </view>
            <view class="right">
                <input class="input" type="digit" v-if="money>0" v-model="money" maxlength="5" />
                <input class="input" type="digit" v-else placeholder="0.00" @input="money=$event.detail.value" />
                元
            </view>
        </view>
        <block v-if="isgroup==1">
            <view class="line">
                <view class="left">
                    红包个数
                </view>
                <view class="right">
                    <input class="input" type="number" v-model="num" placeholder="填写个数" />个
                </view>
            </view>
            <view class="tips" style="color: #666;">
                本群共<span class='text'>{{group.people_count}}</span>人
            </view>
        </block>
        <block v-if="text=='专属红包'">
            <view class="line" @click="select">
                <view class="left">
                    选择好友
                </view>
                <view class="right">
                    <view v-if="uids" style="display: flex;align-items: center;justify-content: right;">
                        <image :src="uids.avatar" style="width: 60rpx;height: 60rpx;border-radius: 50%;margin-right: 10rpx;"></image>
                       {{ uids.nickname}}
                    </view>
                    <view v-else>选择好友</view>
                    
                </view>
            </view>
        </block>
        <view class="line" v-if="text != '口令红包' && text !='专属红包'">
            <input class="input1" :placeholder="system.redpacket_title" v-model="title" />
        </view>
        <view class="line" v-if="text == '口令红包'">
            <input style="text-align: right;" class="input1" placeholder="设置口令,如你真帅" v-model="title" />
        </view>

        <view class="money_show">
            <view class="icon">￥</view>
            <view class="title">{{moneytotal}}</view>
        </view>

        <view class="sendbtn active" @tap='subsend()'>发送红包</view>
        <view style="text-align: center;font-size: 11px;color: #999;">
            未领取的红包，将在<text style="color: #ff7057;">{{system.redpacket_backtime}}小时</text>退回到您的账户
        </view>
        <payment v-if="showpay" @payresult='payresult' :payinfo="payinfo" title="支付" :getmoney="moneytotal" :fix='fix'
            type="redpacket" :id="id" @close="showpay=false;"></payment>

    </view>
</template>

<script>
    import payment from '../../components/payment.vue'
    export default {
        components: {
            payment,

        },
        data() {
            return {
                isgroup: 0,
                id: 0,
                money_title: '总金额',
                type: 1,
                money: '0.00',
                num: '',
                title: '',
                group: '',
                system: uni.getStorageSync('system'),
                user: uni.getStorageSync('userInfo'),
                showpay: false,
                payinfo: {},
                fix: true,
                current: 0,
                tab1: ['手气红包', '专属红包', '口令红包'],
                tab2: ['普通红包', '口令红包'],
                text: '',
                uids: null, //用户id
                opts:{}
            }

        },
        computed: {
            moneytotal() {
                if (this.type == 1) var res = this.money;
                else var res = this.money * this.num;

                if (res > this.system.redpacket_min) return parseFloat(res).toFixed(2);
                else return '0.00'
            },

        },
        methods: {
            // 专属红包，选择好友
            select() {
                uni.navigateTo({
                    url: '/pages/friend/selectFirends/selectFirends?type=mingpian'
                })
            },
            // 顶部切换
            onClickItem(e) {
                this.money = ''
                console.log('红包切换', e)
                if (this.current != e.currentIndex) {
                    this.current = e.currentIndex;
                }
                // 群聊发红包
                if (this.isgroup == 1) {
                    this.text = this.tab1[e.currentIndex]
                } else {
                    this.text = this.tab2[e.currentIndex]
                }
            },
            change_type(type) {
                this.type = type;
                if (type == 1) this.money_title = '总金额';
                else this.money_title = '单个金额'
            },
            payresult(e) {
                if (e > 0) {
					var mid = 'm' + Math.random().toString(36).substring(2);
					var sendData = {
					    title: this.payinfo.title?this.payinfo.title:this.title,
					    status: 1,
					    id: e,
					    isgroup: this.isgroup,
					    type: '2',
					    isopen: 0,
					};
					if (this.isgroup == 1) {
						var data = {
						    userid: this.user.id,
						    group_id: this.id,
						    type: 'group',
						    msgtype: 'redpacket',
						    content: sendData,
						    mid: mid,
						};
						if (this.tab1[this.current] == '专属红包') {
							sendData.type = '3'
							sendData.title = this.uids.nickname
						} else if (this.tab1[this.current] == '口令红包') {
							sendData.title = this.title
							sendData.type = '4'
						} else {
							sendData.type = '1'
						}
						this.$socket.send(data);
                        this.ceshi(data)
                        uni.$emit('readpack',data)
						setTimeout(() => {
							uni.navigateBack();
						}, 100)
					} else {
						if (this.tab2[this.current] == '口令红包'){
							sendData.type = '4'
						}
						var data = {
						    userid: this.user.id,
						    friend_uid: this.id,
						    type: 'chat',
						    msgtype: 'redpacket',
						    content: sendData,
						    mid: mid
						};
						uni.$emit('readpack',data)
						this.$socket.send(data);
                        this.ceshi(data)
						setTimeout(() => {
							uni.navigateBack();
						}, 100)
					}
                } else {
                    uni.showToast({
                        title: '支付发生错误',
                        icon: 'none'
                    })
                }
                this.showpay = false;
            },
            ceshi(order) {
                let imageMessage = this.goEasy.im.createCustomMessage({
                    to: {
                        id: this.id,
                        type: this.isgroup == 0?this.GoEasy.IM_SCENE.PRIVATE :this.GoEasy.IM_SCENE.GROUP,
                        data: {
                            name: this.opts.nickname,
                            avatar: this.opts.avatar
                        }
                    },
                    type: 'redpacket',
                    payload: order,
                    onProgress: function(progress) {
                        console.log(progress)
                    },
                });
                this.sendMessage(imageMessage);
                
            },
            sendMessage(message) {
                this.goEasy.im.sendMessage({
                    message: message,
                    onSuccess: function(message) {
                        console.log('发送成功.', message);
                    },
                    onFailed: function(error) {
                        if (error.code === 507) {
                            console.log(
                                '发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://docs.goeasy.io/2.x/im/message/media/alioss'
                                );
                        } else {
                            console.log('发送失败:', error);
                        }
                    }
                });
                let that = this
                var mid =  'm' + Math.random().toString(36).substring(2);
                let data = {
                    userid: this.user.id,
                    friend_uid: this.id,
                    type: 'chat',
                    msgtype: 'redpacket',
                    content:"1",
                    mid: 'm' + Math.random().toString(36).substring(2)
                };
                that.$socket.send(data);
            },
            subsend() {

                if (this.money < 0.01) {
                    uni.showToast({
                        title: '请输入红包金额',
                        icon: 'none'
                    })
                    return false;
                }
               
                if (this.money / this.num < 0.01) {
                    uni.showToast({
                        title: '红包不够分了！',
                        icon: 'none'
                    })
                    return false;
                }
                if (this.isgroup == 1 && this.num > this.group.people_count) {
                    uni.showToast({
                        title: '红包个数不能大于群总人数',
                        icon: 'none'
                    })
                    return false;
                }
				console.log('可用金额',this.moneytotal, this.user.money)
                // if (Number(this.moneytotal) > this.user.money) {
                //     uni.showModal({
                //         title: '可用余额不足',
                //         content: "您的可用余额不足，请先去联系客服！",
                //         showCancel: true,
                //         cancelText: '取消',
                //         success: res => {

                //             // if(res.confirm) {
                //             //         uni.redirectTo({
                //             //           url:"/pages/mine/recharge"  
                //             //         })
                //             // }
                //         }
                //     });
                //     return false;
                // }
                if (this.text == '专属红包' && !this.uids) {
                    uni.showToast({
                        title: '请选择好友',
                        icon: 'none'
                    })
                    return false;
                }
				if (this.text == '口令红包' && !this.title) {
					uni.showToast({
					    title: '请输入口令',
					    icon: 'none'
					})
					return false;
				}
                if (this.title) var title = this.title;
                else var title = this.system.redpacket_title;
                if (this.isgroup == 1 ) {
                    let current = 1
                    if(this.text == '手气红包') current = 1
                    if(this.text == '专属红包') current = 3
                    if(this.text == '口令红包') current = 4
                    this.payinfo = {
                        isgroup: 1,
                        type: current,
                        permoney: this.money,
                        num: this.num,
                        title: title,
                        chatid: this.id,
                        summoney: this.moneytotal,
                        uids:this.uids
                    }
                }  if (this.isgroup == 0) {
					let current = 0
					if(this.text == '普通红包') current = 2
					if(this.text == '口令红包') current = 4
                    this.payinfo = {
                        isgroup: this.isgroup,
                        type: current,
                        permoney: this.money,
                        num: this.num,
                        title: title,
                        chatid: this.id,
                        summoney: this.moneytotal
                    }
                }
                this.showpay = true;

            },
        },
        onLoad(opts) {
            let that = this
            console.log('用户id,', opts)
            this.opts = opts
            this.id = opts.id;
            this.isgroup = opts.isgroup;
            if (this.isgroup == 0) {
                this.type = 2;
                this.num = 1;
            } else {
                this.group = uni.getStorageSync('group_' + this.id);
				uni.setStorageSync('group_id',this.id)
            }
            uni.$on('mingpian', data => {
                console.log('dadadad',data)
                this.uids  = data
            })
        }

    }
</script>

<style lang="scss">
    view {
        padding: 0px 0px;
        margin: 0px 0px;
    }

    .page {
        background-color: #FAFAFA;
        font-size: 14px;
        ;
        padding-top: 1px;
    }

    .page .tips {
        height: 22px;
        line-height: 22px;
        text-align: left;
        font-size: 12px;
        padding: 0px 10px;

    }

    .page .tips .text {
        display: inline-block;
        color: #c69848;
    }

    .page .line {
        background-color: #FFFFFF;
        margin-top: 15px;
        height: 50px;
        line-height: 50px;
        padding: 0px 10px;
        ;
    }

    .page .line .left {
        width: 100px;
        display: inline-block;
        text-align: left;
        vertical-align: top;
    }

    .page .line .right {
        width: calc(100% - 100px);
        vertical-align: top;
        display: inline-block;
        text-align: right;
    }

    .page .line .right .input {
        height: 40px;
        line-height: 40px;
        width: calc(100% - 30px);
        padding: 0px 5px;
        border: 0px;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
    }

    .page .line .input1 {
        height: 40px;
        line-height: 40px;
        width: calc(100% - 10px);
        padding: 0px 5px;
        border: 0px;
        text-align: left;
        display: inline-block;
        vertical-align: middle;
    }

    .pin {
        height: 18px;
        width: 18px;
        line-height: 18px;
        text-align: center;
        color: #FFF;
        background-color: #c69848;
        border-radius: 3px;
        display: inline-block;
        margin-right: 5px;
    }

    .money_show {
        margin-top: 15px;
        height: 50px;
        line-height: 50px;
        padding: 0px 10px;
        ;
        text-align: center;

    }

    .money_show .icon {
        font-size: 14px;
        color: #333;
        display: inline-block;
    }

    .money_show .title {
        font-size: 34px;
        color: #000;
        display: inline-block;
    }

    .sendbtn {
        height: 40px;
        line-height: 40px;
        display: block;
        width: 92%;
        margin: 15px auto;
        border: 0px;
        color: #fff;
        background-color: #e1e1e1;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        border-radius: 5px;
    }

    .sendbtn.active {
        background-color: #ff7057;
    }

    .bottom {
        height: 30px;
        line-height: 30px;
        color: #666;
        text-align: center;
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
    }
</style>